<template>
    <div class="bottom">
        <div class="left">
            <div>
                <img src="../../../assets/img/detailbottom/服务评价-客服.png" alt="">
                <p>客服</p>
            </div>
            <div>
                <img src="../../../assets/img/detailbottom/店铺.png" alt="">
                <p>店铺</p>
            </div>
            <div>
                <img src="../../../assets/img/detailbottom/收 藏 (1).png" alt="">
                <p>收藏</p>
            </div>
        </div>
        <div class="right">
            <div class="car" @click="addToCar">
                <p>加入购物车</p>
            </div>
            <div class="shopping"  @click="addToCar">
                <p>购买</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'detailbottombar',
    methods:{
        addToCar(){
            this.$emit('addcart')
        }
    }
}
</script>
<style scoped>
.bottom{
    font-size: 15px;
    display: flex;
    justify-items: center;
    position: absolute;
    line-height: 50px;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: rgb(255, 255, 255);
}
.bottom img{
    width: 30px;
}
.bottom div{
    flex: 1;
}
.left{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.left div{
    flex: 1;
}
.right{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.right div{
    flex: 1;
}
.right .car{
    flex: 1.5;
    background-color: rgb(255, 230, 0);
}
.right .shopping{
    flex: 2;
    background-color: rgb(255, 97, 127);
    color: white;
}
.left p{
    position: relative;
    top: -35px;
}

</style>